<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        *{margin: 0px;padding: 0px;}
        body{width: 500px;margin: 0px auto;}
    </style>
  </head>
  <body>
      <div id="vm" class="container d-flex vh-100 justify-content-center align-items-center">
          <!-- 注册 -->
             <template v-if="userState==-1">
                <div class="card border-0">
                    <div class="card-header bg-white">
                        <div class="card-title">
                            <h4>欢迎注册</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <input type="text" class="form-control" v-model="username" @input="keyongpanduan"/>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input :type="isShowPassword ? 'text': 'password'" class="form-control" v-model="password" @input="keyongpanduan"/>
                                <div class="input-group-append">
                                    <button class="btn btn-primary" @click="isShowPassword =!isShowPassword">{{isShowPassword ? '隐藏':'显示'}}</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-block" v-on:click="register" :disabled="isDisabledButton">注 册</button>
                        </div>
                    </div>
                    <div class="card-footer bg-white">
                        <div class="text-center">
                            <a href="#" class="text-muted" v-on:click="userState=0">如你注册请点击此处登录</a>
                        </div>
                    </div>
                </div>
            </template> 
            <!-- 登录 -->
            <template v-if="userState==0">
                <div class="card border-0 d-flex justify-content-center">
                    <div class="card-header bg-white">
                        <div class="card-title">
                            <h4>欢迎登录</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <input type="text" class="form-control" v-model="username"/>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input :type="isShowPassword ?'text':'password'" class="form-control" v-model="password"/>
                                <div class="input-group-append">
                                    <button class="btn btn-primary" @click="isShowPassword =!isShowPassword" >{{isShowPassword ? '隐藏':'显示'}}</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary btn-block" v-on:click="login">登 录</button>
                        </div>
                    </div>
                    <div class="card-footer bg-white">
                        <div class="text-center">
                            <a href="#" class="text-muted" v-on:click="userState=-1">如你注册请点击此处注册</a>
                        </div>
                    </div>
                </div>
            </template>
            <!-- 首页 -->
            <template v-if="userState==1">
                <div class="d-flex vh-100 justify-content-center align-items-center">
                    <h1>欢迎,{{user.username}}</h1>
                    
                    <div class="text-center">
                        <a href="#" class="text-muted" v-on:click="userState=0">点击此处退出</a>
                    </div>
                </div>
            </template>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm=new Vue({
            el:'#vm',
            data:{
                //点击来回切换注册/登录/成功页面
                userState:-1,
                //是否显示输入的密码值
                isShowPassword:false,
                //按钮如果复选框中都没有输入值的话则按钮禁用true:禁用  false:不禁用
                isDisabledButton:true,
                //输入框中的用户名
                username:'',
                //输入的密码
                password:'',
                user:{username:'',password:''}

            },
            methods: {
                init(){
                    this.username=''
                    this.password=''
                },
                keyongpanduan(){
                    if(this.username.length==0||this.password.length==0){
                        this.isDisabledButton=true;
                        console.log(111)
                    }else{
                        this.isDisabledButton=false;
                        console.log(222)
                    }
                },
                //点击注册按钮的操作,并把用户输入的值存在user集合里面
                register(){
                    this.user.username=this.username
                    this.user.password=this.password
                    console.log("注册成功")
                    this.userState=0
                    this.init();
                },
                login(){
                    if(this.username==this.user.username&&this.password==this.user.password){
                        alert("登录成功");
                        this.userState=1;
                        this.init();
                    }else{
                        alert("登录失败,请重新登录")
                        this.init();
                    }
                }
            },
        })
    </script>
  </body>
</html>